<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../css/bootstrap.min.css">
  <script src="../js/jquery.min.js"></script>
  <script src="../js/jQuery.lazyload.js"></script>
  <script src="../js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../css/Page1.css">
  <link rel="stylesheet" href="../css/main.css">
  <script src="../js/common.js"></script>
  <script src="../js/switchBox.js"></script>
  <title>产品商城</title>
</head>

<body>
  <div id="totopBtn" title="回到顶部">
    <svg t="1601527840231" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
      p-id="3897" width="50" height="50">
      <path
        d="M511.732364 1023.755636c69.003636 0 136.029091-13.498182 199.168-40.145454a508.241455 508.241455 0 0 0 162.536727-109.649455 511.662545 511.662545 0 0 0 109.649454-162.536727c26.647273-63.010909 40.145455-130.036364 40.145455-199.168 0-69.026909-13.498182-136.029091-40.145455-199.179636a508.241455 508.241455 0 0 0-109.649454-162.536728 511.662545 511.662545 0 0 0-162.536727-109.649454C647.889455 14.242909 580.864 0.744727 511.732364 0.744727c-69.026909 0-136.029091 13.498182-199.179637 40.145455a508.241455 508.241455 0 0 0-162.536727 109.649454 511.662545 511.662545 0 0 0-109.649455 162.536728C13.719273 376.087273 0.221091 443.112727 0.221091 512.256c0 69.003636 13.498182 136.029091 40.145454 199.168a508.241455 508.241455 0 0 0 109.649455 162.536727A511.662545 511.662545 0 0 0 312.552727 983.621818a509.754182 509.754182 0 0 0 199.179637 40.145455z m-1.128728-597.410909L321.431273 615.540364a29.626182 29.626182 0 0 1-42.007273 0 29.626182 29.626182 0 0 1 0-42.007273l210.036364-210.059636c11.636364-11.636364 30.394182-11.636364 42.018909 0l210.048 210.048a29.626182 29.626182 0 0 1 0 42.007272 29.626182 29.626182 0 0 1-42.007273 0L510.603636 426.356364z"
        p-id="3898" fill="#2c2c2c"></path>
    </svg>
  </div>
  <div class="Header">
    <img src="../img/logo.png">
    <h4>蓉城——文化之旅</h4>
    <ul>
      <li><a id="nav-docs" href="../index.html">首页</a></li>
      <li><a id="nav-updates">产品商城</a></li>
      <li><a id="nav-extend" href="./Page3.html">旅游资讯</a></li>
      <li><a id="nav-blogs" href="./Page4.html">旅游攻略</a></li>
      <li><a id="nav-extend" href="./Page5.html">美食推荐</a></li>
    </ul>
  </div>
  <div class="P1-Box2">
    <div class="search-box hidden-xs">
      <input class="search-txt" type="text" placeholder="Type to search" />
      <a class="search-btn" title="点击搜索">
        <svg t="1601604474228" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="3952" width="28" height="28">
          <path
            d="M468.109885 922.338622c-249.561869 0-452.596052-203.032136-452.596052-452.576609C15.513834 220.177632 218.548016 17.143449 468.109885 17.143449c249.564939 0 452.600145 203.034183 452.600145 452.619588C920.710031 719.306486 717.700407 922.338622 468.109885 922.338622L468.109885 922.338622zM468.109885 62.879096C243.769444 62.879096 61.248458 245.400083 61.248458 469.763037c0 224.346581 182.520987 406.843008 406.860405 406.843008 224.369094 0 406.865521-182.496427 406.865521-406.843008C874.975407 245.400083 692.478979 62.879096 468.109885 62.879096L468.109885 62.879096zM468.109885 62.879096M985.626529 1006.855528c-5.599532 0-11.226692-2.058892-15.663748-6.198166L753.739205 797.669228c-9.191336-8.641821-9.671267-23.13593-1.030469-32.330336 8.66945-9.191336 23.143093-9.629311 32.334429-1.031493l216.223576 202.986087c9.196453 8.643867 9.676383 23.144116 1.031493 32.336476C997.818199 1004.433362 991.733621 1006.855528 985.626529 1006.855528L985.626529 1006.855528zM985.626529 1006.855528M210.912106 350.799598c3.125177 1.868557 6.558369 2.7486 9.949606 2.7486 6.678096 0 13.164834-3.414773 16.823154-9.555633 55.520501-93.473905 157.461241-151.551648 266.039145-151.551648 10.796904 0 19.532869-8.729825 19.532869-19.525706 0-10.794857-8.735965-19.529799-19.532869-19.529799-122.288161 0-237.102093 65.396429-299.627125 170.658821C198.586382 333.309248 201.639928 345.30649 210.912106 350.799598L210.912106 350.799598zM210.912106 350.799598M196.227662 401.11761c-10.488889-2.422166-20.99415 4.058432-23.457248 14.567787-5.832845 24.929786-9.135054 40.378639-9.135054 68.106144 0 10.793834 8.754385 19.530822 19.531845 19.530822 10.794857 0 19.529799-8.738012 19.529799-19.530822 0-23.531949 2.631944-35.814694 8.106632-59.2218C213.260593 414.06141 206.73804 403.575592 196.227662 401.11761L196.227662 401.11761zM196.227662 401.11761"
            p-id="3953" fill="#FFFFFF"></path>
        </svg>
      </a>
    </div>
    <div class="search-box-xs visible-xs">
      <input type="text" placeholder="Type to search" />
      <a>
        <svg t="1601604474228" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="3952" width="24" height="24">
          <path
            d="M468.109885 922.338622c-249.561869 0-452.596052-203.032136-452.596052-452.576609C15.513834 220.177632 218.548016 17.143449 468.109885 17.143449c249.564939 0 452.600145 203.034183 452.600145 452.619588C920.710031 719.306486 717.700407 922.338622 468.109885 922.338622L468.109885 922.338622zM468.109885 62.879096C243.769444 62.879096 61.248458 245.400083 61.248458 469.763037c0 224.346581 182.520987 406.843008 406.860405 406.843008 224.369094 0 406.865521-182.496427 406.865521-406.843008C874.975407 245.400083 692.478979 62.879096 468.109885 62.879096L468.109885 62.879096zM468.109885 62.879096M985.626529 1006.855528c-5.599532 0-11.226692-2.058892-15.663748-6.198166L753.739205 797.669228c-9.191336-8.641821-9.671267-23.13593-1.030469-32.330336 8.66945-9.191336 23.143093-9.629311 32.334429-1.031493l216.223576 202.986087c9.196453 8.643867 9.676383 23.144116 1.031493 32.336476C997.818199 1004.433362 991.733621 1006.855528 985.626529 1006.855528L985.626529 1006.855528zM985.626529 1006.855528M210.912106 350.799598c3.125177 1.868557 6.558369 2.7486 9.949606 2.7486 6.678096 0 13.164834-3.414773 16.823154-9.555633 55.520501-93.473905 157.461241-151.551648 266.039145-151.551648 10.796904 0 19.532869-8.729825 19.532869-19.525706 0-10.794857-8.735965-19.529799-19.532869-19.529799-122.288161 0-237.102093 65.396429-299.627125 170.658821C198.586382 333.309248 201.639928 345.30649 210.912106 350.799598L210.912106 350.799598zM210.912106 350.799598M196.227662 401.11761c-10.488889-2.422166-20.99415 4.058432-23.457248 14.567787-5.832845 24.929786-9.135054 40.378639-9.135054 68.106144 0 10.793834 8.754385 19.530822 19.531845 19.530822 10.794857 0 19.529799-8.738012 19.529799-19.530822 0-23.531949 2.631944-35.814694 8.106632-59.2218C213.260593 414.06141 206.73804 403.575592 196.227662 401.11761L196.227662 401.11761zM196.227662 401.11761"
            p-id="3953" fill="#BE3F0D"></path>
        </svg>
      </a>
    </div>
  </div>
  <div class="container-fluid P1-Box3">
    <div class="container">
      <div>
        <h2>抱枕 / 装饰</h2>
        <p>Bolster & Clothing</p>
      </div>
      <div>
        <p>纯棉可爱风抱枕靠枕、纯棉设计感抱枕靠枕、文艺风斜挎包、设计感通勤斜挎包、传统文化元素棒球帽应有尽有
        </p>
      </div>
      <!--
      <div class="slider">
        <div class="col-lg-12"><img class="disimg" src="../img/p1-pic1.png" alt=""></div>
        <div class="more">
          <h4 onclick="window.open('./goodDetail.html')">查看详情</h4>
        </div>
       </div>
      -->
    </div>
    <div class="outBox1">
      <div class="prevBtn1"><img src="../img/leftBtn.png"></div>
      <div class="nextBtn1"><img src="../img/rightBtn.png"></div>
      <div class="scrollBox1">
        <div class="P1-Box4 itemBox1">
          <div class="P1-Box4-1" onclick="window.open('./goodDetail.html?id=0')">
            <img data-original="../img/goods/s-20.png" class="img-responsive lazy">
            <p>卡通熊猫抱枕</p>
          </div>
          <div class="P1-Box4-1" onclick="window.open('./goodDetail.html?id=01')">
            <img data-original="../img/goods/s-21.png" class="img-responsive lazy">
            <p>贪睡熊猫抱枕</p>
          </div>
          <div class="P1-Box4-1" onclick="window.open('./goodDetail.html?id=02')">
            <img data-original="../img/goods/s-22.jpg" class="img-responsive lazy">
            <p>熊猫之家斜挎包</p>
          </div>
          <div class="P1-Box4-1" onclick="window.open('./goodDetail.html?id=03')">
            <img src="../img/goods/s-23.png" class="img-responsive lazy">
            <p>成都文化斜挎包</p>
          </div>
          <div class="P1-Box4-1" onclick="window.open('./goodDetail.html?id=04')">
            <img src="../img/goods/s-24.png" class="img-responsive lazy">
            <p>脸谱棒球帽</p>
          </div>
          <div class="P1-Box4-1" onclick="window.open('./goodDetail.html?id=04')">
            <img src="../img/goods/s-25.png" class="img-responsive lazy">
            <p>脸谱棒球帽</p>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div>
        <h2>精美纪念品</h2>
        <p>Souvenir</p>
      </div>
      <div>
        <p>木质明信片小物品收纳盒、戒指耳环首饰收纳包装盒、原创设计桌面台历、原创手账装饰胶带、纸质拼图安全耐玩应有尽有
        </p>
      </div>
      <!-- <div class="slider">
                <div class="col-lg-12"><img class="disimg" src="../img/p1-pic1.png" alt=""></div>
                <div class="more">
                    <h4 onclick="window.open('./goodDetail.html?id=05')">查看详情</h4>
                </div>
            </div> -->
    </div>
    <div class="outBox4">
      <div class="prevBtn4"><img src="../img/leftBtn.png"></div>
      <div class="nextBtn4"><img src="../img/rightBtn.png"></div>
      <div class="scrollBox4">
        <div class="P1-Box4 itemBox4">
          <div class="P1-Box4-1" onclick="window.open('./goodDetail.html?id=05')">
            <img src="../img/goods/s-26.png" class="img-responsive lazy">
            <p>蓉都之旅收纳盒</p>
          </div>
          <div class="P1-Box4-1" onclick="window.open('./goodDetail.html?id=06')">
            <img src="../img/goods/s-27.png" class="img-responsive lazy">
            <p>熊猫小礼品盒</p>
          </div>
          <div class="P1-Box4-1" onclick="window.open('./goodDetail.html?id=07')">
            <img src="../img/goods/s-28.png" class="img-responsive lazy">
            <p>2020与梦同行台历</p>
          </div>
          <div class="P1-Box4-1" onclick="window.open('./goodDetail.html?id=08')">
            <img src="../img/goods/s-29.png" class="img-responsive lazy">
            <p>卡通胶带</p>
          </div>
          <div class="P1-Box4-1" onclick="window.open('./goodDetail.html?id=09')">
            <img src="../img/goods/s-30.png" class="img-responsive lazy">
            <p>蓉都火锅美食益智拼图</p>
          </div>
          <div class="P1-Box4-1" onclick="window.open('./goodDetail.html?id=10')">
            <img src="../img/goods/s-31.jpg" class="img-responsive lazy">
            <p>天府大道益智拼图</p>
          </div>
          <div class="P1-Box4-1">
            <img src="../img/goods/s-32.png" class="img-responsive lazy">
            <p>蓉都之旅纪念雨伞</p>
          </div>
          <div class="P1-Box4-1">
            <img src="../img/goods/s-33.png" class="img-responsive lazy">
            <p>卡通熊猫雨伞</p>
          </div>
          <div class="P1-Box4-1">
            <img src="../img/goods/s-34.png" class="img-responsive lazy">
            <p>2020熊猫台历</p>
          </div>
          <div class="P1-Box4-1">
            <img src="../img/goods/s-35.png" class="img-responsive lazy">
            <p>漫画熊猫挂绳</p>
          </div>
          <div class="P1-Box4-1">
            <img src="../img/goods/s-36.jpg" class="img-responsive lazy">
            <p>漫画熊猫挂绳</p>
          </div>
          <div class="P1-Box4-1">
            <img src="../img/goods/s-37.png" class="img-responsive lazy">
            <p>2020熊猫台历</p>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div>
        <h2>明信片</h2>
        <p>Postcard</p>
      </div>
      <div>
        <p>蓉都精美明信片、武侯祠精美明信片、青城山精美明信片、小册子、青龙山特产等应有尽有
        </p>
      </div>
      <!-- <div class="slider">
                <div class="col-lg-12"><img class="disimg" src="../img/p1-pic1.png" alt=""></div>
                <div class="more">
                    <h4 onclick="window.open('./goodDetail.html?id=11')">查看详情</h4>
                </div>
            </div> -->
    </div>
    <div class="outBox2">
      <div class="prevBtn2"><img src="../img/leftBtn.png"></div>
      <div class="nextBtn2"><img src="../img/rightBtn.png"></div>
      <div class="scrollBox2">
        <div class="P1-Box4 itemBox2">
          <div class="P1-Box4-1" onclick="window.open('./goodDetail.html?id=11')">
            <img src="../img/goods/s-11.png" class="img-responsive">
            <p>蓉都明信片</p>
          </div>
          <div class="P1-Box4-1" onclick="window.open('./goodDetail.html?id=12')">
            <img src="../img/goods/s-12.png" class="img-responsive">
            <p>武侯祠明信片</p>
          </div>
          <div class="P1-Box4-1" onclick="window.open('./goodDetail.html?id=13')">
            <img src="../img/goods/s-14.png" class="img-responsive">
            <p>青城山明信片</p>
          </div>
          <div class="P1-Box4-1">
            <img src="../img/goods/s-13.png" class="img-responsive">
            <p>青城山小册子</p>
          </div>
          <div class="P1-Box4-1">
            <img src="../img/goods/s-15.png" class="img-responsive">
            <p>青龙山特产</p>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div>
        <h2>数码小礼品</h2>
        <p>Digital Gifts</p>
      </div>
      <div>
        <p>各类软胶材质手机壳等你来探寻
        </p>
      </div>
      <!-- <div class="slider">
                <div class="col-lg-12"><img class="disimg" src="../img/p1-pic1.png" alt=""></div>
                <div class="more">
                    <h4 onclick="window.open('./goodDetail.html?id=14')">查看详情</h4>
                </div>
            </div> -->
    </div>
    <div class="outBox3">
      <div class="prevBtn3"><img src="../img/leftBtn.png"></div>
      <div class="nextBtn3"><img src="../img/rightBtn.png"></div>
      <div class="scrollBox3">
        <div class="P1-Box4 itemBox3">
          <div class="P1-Box4-1" onclick="window.open('./goodDetail.html?id=14')">
            <img src="../img/goods/s-18.png" class="img-responsive">
            <p>卖萌卡通熊猫手机壳</p>
          </div>
          <div class="P1-Box4-1" onclick="window.open('./goodDetail.html?id=15')">
            <img src="../img/goods/s-16.png" class="img-responsive">
            <p>吃火锅的国宝崽手机壳</p>
          </div>
          <div class="P1-Box4-1" onclick="window.open('./goodDetail.html?id=16')">
            <img src="../img/goods/s-19.png" class="img-responsive">
            <p>贪睡的国宝崽手机壳</p>
          </div>
          <div class="P1-Box4-1">
            <img src="../img/goods/s-17.png" class="img-responsive">
            <p>大成都风格手机壳</p>
          </div>
          <div class="P1-Box4-1">
            <img src="../img/goods/s-7.jpg" class="img-responsive">
            <p>可爱熊猫鼠标垫</p>
          </div>
          <div class="P1-Box4-1">
            <img src="../img/goods/s-8.jpg" class="img-responsive">
            <p>憨厚熊猫鼠标垫</p>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div>
        <h2>文具</h2>
        <p>Stationery</p>
      </div>
      <div>
        <p>低重心金属自动铅笔、钢笔硬笔礼品盒、牛皮纸双线圈活页本应有尽有
        </p>
      </div>
      <!-- <div class="slider">
                <div class="col-lg-12"><img class="disimg" src="../img/p1-pic1.png" alt=""></div>
                <div class="more">
                    <h4 onclick="window.open('./goodDetail.html?id=17')">查看详情</h4>
                </div>
            </div> -->
    </div>
    <div class="outBox5">
      <div class="scrollBox5">
        <div class="P1-Box4 itemBox5">
          <div class="P1-Box4-1" onclick="window.open('./goodDetail.html?id=17')">
            <img src="../img/goods/s-38.png" class="img-responsive">
            <p>简约自动铅笔带收纳盒</p>
          </div>
          <div class="P1-Box4-1" onclick="window.open('./goodDetail.html?id=18')">
            <img src="../img/goods/s-39.png" class="img-responsive">
            <p>钢笔礼品盒</p>
          </div>
          <div class="P1-Box4-1" onclick="window.open('./goodDetail.html?id=19')">
            <img src="../img/goods/s-40.png" class="img-responsive">
            <p>蓉都之旅笔记本子</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  const moreBtns = document.querySelectorAll('.more')
  const boxes = document.querySelectorAll('.col-lg-12')
  for (const i in moreBtns) {
    moreBtns[i].onmouseover = () => {
      boxes[i].style.transform = "translateX(0)"
    }
    moreBtns[i].onmouseout = () => {
      boxes[i].style.transform = "translateX(-100px)"
    }
  }
</script>

</html>